<template>
  <div class="home">
    <homeFloor :roomList="currentRoomList" :rotateDu="rotateDu"></homeFloor>
    <div class="floor-switcher">
      <button
        class="use-btn floor-button"
        :class="{ active: item.floor == currentFloor }"
        v-for="item in floorMap"
        @click="changeFloor(item.floor)"
      >
        {{ item.floor }}F
      </button>
    </div>
    <div class="use-btn myAssets-button no-light" @click="openMyAssets">
      我的资产
    </div>
    <div class="use-btn work-button no-light" @click="openWorkOrder">
      提报工单
    </div>
    <div class="use-btn rotate-button no-light" @click="rotate">
      <i class="fas fa-sync-alt"></i>
    </div>
    <div class="use-btn search-button no-light" @click="handleSearch">
      <i class="fas fa-search"></i>
    </div>
    <div class="use-btn help-button no-light" @click="help">
      <i class="fas fa-question-circle"></i>
    </div>
    <roomDialog></roomDialog>
    <myAssetsDialog
      :isShowMyAssets="isShowMyAssets"
      @closeMyAssets="closeMyAssets"
    ></myAssetsDialog>
    <workOrder
      v-if="isShowWorkOrder"
      @closeWorkOrder="closeWorkOrder"
    ></workOrder>
    <search v-if="isShowSearch" @closeSearch="closeSearch"></search>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import homeFloor from "@/components/home/homeFloor.vue";
import myAssetsDialog from "@/components/home/myAssetsDialog.vue";
import roomDialog from "@/components/home/roomDialog.vue";
import workOrder from "@/components/home/workOrder.vue";
import search from "@/components/home/search.vue";
import { getUrlId } from "@/utils/index";
import { getUserInfo } from "@/api/index";
import { useStore } from "vuex";
// 我的资产弹窗
const isShowMyAssets = ref(false);
// 搜索弹窗
const isShowSearch = ref(false);
const store = useStore();
const rotateDu = ref(0);
const isShowWorkOrder = ref(false);
const floorMap = reactive([
  {
    floor: 25,
    departmentList: [
      "127",
      "106",
      "119",
      "128",
      "129",
      "121",
      "41",
      "204",
      "251",
      "221",
      "225",
    ],
    roomList: [
      {
        name: "25楼会议室",
        roomid: 0,
        style:
          "right: 47.3%; bottom: 0; width: 22.7%; height: 25%; background-color: #F4F9FF;",
      },
      {
        name: "接待室",
        roomid: 0,
        style:
          "right: 0; top: 24.8%; width: 29.8%; height: 25.2%; background-color: #F0FFF4;",
      },
      {
        name: "内部楼梯\n至24层",
        roomid: 0,
        style:
          "right: 29.8%; top: 0; width: 10%; height: 24.8%; background-color: #F5F5F7;",
      },
      {
        name: "镂空",
        roomid: 0,
        style:
          "right: 39.8%; top: 0%; width: 10%; height: 24.8%; background-color: #FFE8EF;",
      },
      {
        name: "人力资源部",
        roomid: 6,
        style:
          "right: 0; top: 0; width: 29.8%; height: 24.8%; background-color: #E6F3FF;",
      },
      {
        name: "设计部",
        roomid: 7,
        style:
          "right: 0; bottom: 0; width: 47.3%; height: 25%; background-color: #FFF5EA;",
      },
      {
        name: "VIP客户事业部\n互联网平台",
        roomid: 8,
        style:
          "left: 0; top: 0; width: 50.2%; height: 24.8%; background-color: #E8F4F2;",
      },
      {
        name: "总经理办公室",
        roomid: 9,
        style:
          "right: 0; width: 29.8%; height: 25%; bottom:25%; background-color: #FFF0F6;",
      },
      {
        name: "广告部\n融媒体部\n活动策划部",
        roomid: 10,
        style:
          "left: 0; top: 50%; width: 30%; height: 50%; background-color: #FFF4E6;",
      },
      {
        name: "水吧\n卫生间",
        roomid: 0,
        style:
          "left: 0; top: 24.8%; width: 30%; height: 25.2%; background-color: #F0F7FF;",
      },
    ],
  },
  {
    floor: 24,
    departmentList: ["131", "130", "212", "250", "217", "79", "227", "76"],
    roomList: [
      {
        name: "信息部\n行政部\n市场监察部",
        roomid: 1,
        style:
          "left: 0; top: 0; width: 35.2%; height: 24.8%; background-color: #E8F4F2;",
      },
      {
        name: "水吧\n卫生间",
        roomid: 0,
        style:
          "left: 0; top: 24.8%; width: 30%; height: 25.2%; background-color: #F0F7FF;",
      },
      {
        name: "三号会议室",
        roomid: 0,
        style:
          "left: 0; top: 50%; width: 30%; height: 25%; background-color: #FFF4E6;",
      },
      {
        name: "副总经理办公室",
        roomid: 3,
        style:
          "left: 0; bottom: 0; width: 35%; height: 25%; background-color: #F4EEFF;",
      },
      {
        name: "前台",
        roomid: 2,
        style:
          "left: 35.2%; top: 0%; width: 25%; height: 24.8%; background-color: #FFE8EF;",
      },
      {
        name: "内部楼梯\n至25层",
        roomid: 0,
        style:
          "right: 29.8%; top: 0; width: 10%; height: 24.8%; background-color: #F5F5F7;",
      },
      {
        name: "展厅",
        roomid: 0,
        style:
          "right: 0; top: 0; width: 29.8%; height: 24.8%; background-color: #E6F3FF;",
      },
      {
        name: "一号会议室",
        roomid: 0,
        style:
          "right: 0; top: 24.8%; width: 29.8%; height: 35.2%; background-color: #F0FFF4;",
      },
      {
        name: "二号会议室",
        roomid: 0,
        style:
          "right: 0; width: 29.8%; height: 40%; bottom: 0%; background-color: #FFF0F6;",
      },
      {
        name: "副总经办",
        roomid: 4,
        style:
          "right: 47.5%; bottom: 0; width: 17.5%; height: 25%; background-color: #F4F9FF;",
      },
      {
        name: "市场部",
        roomid: 5,
        style:
          "right: 29.8%; bottom: 0; width: 17.7%; height: 25%; background-color: #FFF5EA;",
      },
    ],
  },
  {
    floor: 23,
    departmentList: ["73", "214", "213", "215", "19", "84", "20", "82"],
    roomList: [
      {
        name: "会议室",
        roomid: 0,
        style:
          "right: 29.8%; top: 0; width: 15%; height: 24.8%; background-color: #F5F5F7;",
      },
      {
        name: "费用核算二部\n费用核算三部",
        roomid: 11,
        style:
          "right: 0; top: 0; width: 29.8%; height: 41%; background-color: #E6F3FF;",
      },
      {
        name: "襄阳大区总监办公室",
        roomid: 12,
        style:
          "right: 0; width: 29.8%; height: 34%; bottom:25%; background-color: #FFF0F6;",
      },
      {
        name: "生态三香产品事业部\n清香产品事业部\n大工匠产品事业部",
        roomid: 13,
        style:
          "left: 0; top: 50%; width: 30%; height: 25%; background-color: #FFF4E6;",
      },
      {
        name: "特品事业部",
        roomid: 14,
        style:
          "left: 0; top: 24.8%; width: 30%; height: 25.2%; background-color: #F0F7FF;",
      },
      {
        name: "费用核算一部",
        roomid: 15,
        style:
          "left: 0; top: 0; width: 30.4%; height: 24.8%; background-color: #E8F4F2;",
      },
      {
        name: "襄阳大区",
        roomid: 16,
        style:
          "left: 30.4%; top: 0%; width: 24.8%; height: 24.8%; background-color: #FFE8EF;",
      },
      {
        name: "会议室",
        roomid: 0,
        style:
          "right: 0; bottom: 0; width: 100%; height: 25%; background-color: #FFF5EA;",
      },
    ],
  },
]);
const currentFloor = ref(24);
const currentRoomList = computed(() => {
  return floorMap.find((item) => item.floor == currentFloor.value).roomList;
});
const changeFloor = (floor) => {
  currentFloor.value = floor;
};
// 旋转
function rotate() {
  // homeFloor整体旋转
  rotateDu.value = (rotateDu.value - 90) % 360;
}
// 搜索
function handleSearch() {
  isShowSearch.value = true;
}
function closeSearch() {
  isShowSearch.value = false;
}
// 帮助
function help() {
  window.open(
    "https://chat.shihua9.com/ui/chat/9546482852cd6614",
    "_blank",
    "width=1200,height=800,top=200,left=200"
  );
}
// 打开我的资产详情
function openMyAssets() {
  isShowMyAssets.value = true;
}
function closeMyAssets() {
  isShowMyAssets.value = false;
}
// 初始楼层位置
function initMyFloor() {
  getUserInfo(getUrlId()).then(({ data: res }) => {
    if (res.code == 0) {
      store.commit("setUserInfo", res.data);
      const myDepartment = store.getters["getUserInfo"].departmentid;
      floorMap.find((item) => {
        if (item.departmentList.includes(myDepartment)) {
          currentFloor.value = item.floor;
        }
      });
    }
  });
}
initMyFloor();
// 提报工单
function openWorkOrder() {
  isShowWorkOrder.value = true;
}
function closeWorkOrder() {
  isShowWorkOrder.value = false;
}
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .floor-switcher {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1001;
  }
  .use-btn {
    background-color: #6366f1;
    transition: all 0.3s ease;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  .floor-button {
    left: 20px;
    bottom: 20px;
    width: 45px;
    height: 45px;
    font-size: 15px;
    font-weight: bold;
    opacity: 0.7;
  }

  .use-btn:hover {
    background-color: #4f46e5;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    opacity: 1;
  }
  .floor-button.active {
    background-color: #4f46e5;
    opacity: 1;
    transform: scale(1.1);
  }
  .no-light {
    position: fixed;
    width: 50px;
    height: 50px;
    padding: 10px;
    font-size: 14px;
    font-weight: 800;
  }
  .myAssets-button {
    top: 20px;
    left: 20px;
  }
  .work-button {
    top: 90px;
    left: 20px;
  }
  .rotate-button {
    bottom: 20px;
    right: 20px;
    i {
      font-size: 22px;
    }
  }
  .search-button {
    bottom: 80px;
    right: 20px;
    i {
      font-size: 22px;
    }
  }
  .help-button {
    bottom: 140px;
    right: 20px;
    i {
      font-size: 22px;
    }
  }
}
</style>
